<template>
    <yh-dialog drag :visible.sync="showEntryGroupModal" title="选择条目组" :close-on-click-modal="false">
        <div class="trant">
            <!-- 左边表格数据 -->
            <div class="trant-left">
                <div class="trant-content">
                    <el-table
                        ref="leftTable"
                        :data="dataSourceLeft"
                        tooltip-effect="dark"
                        style="width: 100%"
                        height="470px"
                        border
                        @selection-change="handleSelectionChange($event, 'rowSelectionLeft')"
                    >
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column label="编号" show-overflow-tooltip prop="groupCode"></el-table-column>
                        <el-table-column label="名称" show-overflow-tooltip prop="groupName"></el-table-column>

                        <!-- <el-table-column
                        v-for="col in leftColumns"
                        :key="col.prop"
                        :prop="col.prop"
                        :label="col.label"
                        :width="col.width"
                        show-overflow-tooltip
                    ></el-table-column> -->
                    </el-table>
                </div>
            </div>

            <!-- 中间2个键 -->
            <div class="trant-but">
                <el-button type="primary" icon="el-icon-arrow-right" :disabled="!selectKeyLeft.length" @click="handleMoveToData('LTCR')"></el-button>
                <br />
                <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    :disabled="!selectKeyCalculateRight.length"
                    @click="handleMoveToData('CRTL')"
                ></el-button>
            </div>

            <div class="trant-but2">
                <el-button type="primary" icon="el-icon-arrow-right" :disabled="!selectKeyLeft.length" @click="handleMoveToData('LTER')"></el-button>
                <br />
                <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    :disabled="!selectKeyExcludeRight.length"
                    @click="handleMoveToData('ERTL')"
                ></el-button>
            </div>
            <!-- 右边表格数据 -->
            <div class="trant-right">
                <div class="trant-content">
                    <p>计算以下条目组</p>
                    <el-table
                        ref="rightTable"
                        :data="dataSourceCalculateRight"
                        tooltip-effect="dark"
                        style="width: 100%"
                        height="208px"
                        border
                        @selection-change="handleSelectionChange($event, 'rowSelectionCalculateRight')"
                    >
                        <!-- @select-all="handleAllSelectionChange($event, 'rowSelectionCalculateRight')" -->
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column label="编号" show-overflow-tooltip prop="groupCode"></el-table-column>
                        <el-table-column label="名称" show-overflow-tooltip prop="groupName"></el-table-column>
                    </el-table>
                </div>
                <div class="trant-content" style="margin-top: 10px">
                    <p>排除以下条目组</p>
                    <el-table
                        ref="rightTable"
                        :data="dataSourceExcludeRight"
                        tooltip-effect="dark"
                        style="width: 100%"
                        height="208px"
                        border
                        @selection-change="handleSelectionChange($event, 'rowSelectionExcludeRight')"
                    >
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column label="编号" show-overflow-tooltip prop="groupCode"></el-table-column>
                        <el-table-column label="名称" show-overflow-tooltip prop="groupName"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handelBtnClick('cancel')">取消</el-button>
            <el-button type="primary" @click="handelBtnClick('confirm')">确认</el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { getActiveMenuCode } from '@/utils/user-util';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';

@Component({
    name: 'oneToTwoTranstable',
    components: {},
})
export default class oneToTwoTranstable extends Vue {
    @Prop() selectEntryGroupCode: any;
    @Prop() showEntryGroupModal: boolean;
    @Prop() resourceCode: string;
    private dataSourceLeft: any[] = [];
    private leftTableDataStorage: any[] = [];
    private rightTableDataStorage: any[] = [];
    private dataSourceCalculateRight: any[] = [];
    private dataSourceExcludeRight: any[] = [];
    private entryGroups: any[] = [];
    private selectKeyLeft: any[] = [];
    private selectKeyCalculateRight: any[] = [];
    private selectKeyExcludeRight: any[] = [];

    @Watch('showEntryGroupModal')
    onWatchShowEntryGroupModal(value) {
        if (!value) {
            this.$emit('update:showEntryGroupModal', value);
        }
    }

    async mounted() {
        await this.getEntryGroupList();

        let calculateEntryGroup = (this.selectEntryGroupCode || []).calculateEntryGroup;
        let excludeEntryGroup = (this.selectEntryGroupCode || []).excludeEntryGroup;
        this.dataSourceLeft = this.entryGroups.filter(
            (item) => !calculateEntryGroup.includes(item.groupCode) && !excludeEntryGroup.includes(item.groupCode)
        );
        this.dataSourceCalculateRight = this.entryGroups.filter((item) => calculateEntryGroup.includes(item.groupCode));
        this.dataSourceExcludeRight = this.entryGroups.filter((item) => excludeEntryGroup.includes(item.groupCode));
        this.selectKeyCalculateRight = [];
        this.selectKeyExcludeRight = [];
    }

    // 获取条目组信息
    private async getEntryGroupList() {
        await this.$axios.get('/entry/group/list').then((res: any) => {
            this.entryGroups = res.map((item) => {
                return {
                    key: item.groupCode,
                    groupCode: item.groupCode,
                    groupName: item.groupName,
                };
            });
            this.entryGroups = this.entryGroups.filter((item) => {
                return item.groupCode !== 'DEFAULT';
            });
            console.log(this.entryGroups);
        });
    }

    // 数据左右传递
    private handleMoveToData(type: string): void {
        if (type === 'LTCR') {
            // left to calculate right
            if (this.selectKeyLeft.length === 0) {
                return;
            }
            let value = this.dataSourceLeft.filter((item) => this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceLeft = this.dataSourceLeft.filter((item) => !this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceCalculateRight = value.concat(this.dataSourceCalculateRight);
            this.selectKeyLeft = [];
        } else if (type === 'CRTL') {
            // calculate right to left
            if (this.selectKeyCalculateRight.length === 0) {
                return;
            }
            let value = this.dataSourceCalculateRight.filter((item) => this.selectKeyCalculateRight.includes(item.groupCode));
            this.dataSourceCalculateRight = this.dataSourceCalculateRight.filter((item) => !this.selectKeyCalculateRight.includes(item.groupCode));
            this.dataSourceLeft = value.concat(this.dataSourceLeft);
            this.selectKeyCalculateRight = [];
        } else if (type === 'LTER') {
            // left to exclude right
            if (this.selectKeyLeft.length === 0) {
                return;
            }
            let value = this.dataSourceLeft.filter((item) => this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceLeft = this.dataSourceLeft.filter((item) => !this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceExcludeRight = value.concat(this.dataSourceExcludeRight);
            this.selectKeyLeft = [];
        } else if (type === 'ERTL') {
            // exclude right TO left
            if (this.selectKeyExcludeRight.length === 0) {
                return;
            }
            let value = this.dataSourceExcludeRight.filter((item) => this.selectKeyExcludeRight.includes(item.groupCode));
            this.dataSourceExcludeRight = this.dataSourceExcludeRight.filter((item) => !this.selectKeyExcludeRight.includes(item.groupCode));
            this.dataSourceLeft = value.concat(this.dataSourceLeft);
            this.selectKeyExcludeRight = [];
        }
    }

    // 按钮事件
    private handelBtnClick(action: string): void {
        if (action === 'confirm') {
            let dataParam = this.dataSourceCalculateRight
                .map((item) => {
                    return { groupCode: item.groupCode, instGroupType: '1' };
                })
                .concat(
                    this.dataSourceExcludeRight.map((item) => {
                        return { groupCode: item.groupCode, instGroupType: '2' };
                    })
                );
            // 新增或编辑 用户配置的组信息 用于指令试算
            this.$axios.post('/entry/group/user/select/insert/' + this.resourceCode, dataParam).then((res: any) => {
                this.yh_message_success('保存成功');
                // 获取用户配置组信息
                this.$axios.get('/entry/group/user/select/list/' + this.resourceCode).then((res: any) => {
                    res.forEach((item) => (item.key = item.groupCode));
                    this.$emit('transReturn', {
                        action: action,
                        data: {
                            calculateEntryGroup: res
                                .filter((item) => item.instGroupType === '1' && item.groupCode !== 'DEFAULT')
                                .map((item) => item.groupCode),
                            excludeEntryGroup: res
                                .filter((item) => item.instGroupType === '2' && item.groupCode !== 'DEFAULT')
                                .map((item) => item.groupCode),
                        },
                    });
                });
            });
        } else if (action === 'cancel') {
            this.$emit('transReturn', { action: action });
        }
    }

    // 勾选
    private handleSelectionChange(selectedRowKeys: any, type: string) {
        let keys = XEUtils.map(selectedRowKeys, (item) => item.groupCode);
        if (type === 'rowSelectionLeft') {
            this.selectKeyLeft = keys;
        } else if (type === 'rowSelectionCalculateRight') {
            this.selectKeyCalculateRight = keys;
        } else {
            this.selectKeyExcludeRight = keys;
        }
    }

    // 勾选
    // private handleAllSelectionChange(value: any, type: string) {
    //     console.log(value, type);
    // }
}
</script>
<style lang="scss" scoped>
.trant {
    min-width: 700px;
    margin: auto;
    position: relative;

    .trant-left,
    .trant-right {
        .trant-content {
            // border: 1px solid #eee;
            width: 300px;
            // margin-top: 10px;
        }
    }

    .trant-but {
        position: absolute;
        top: 85px;
        left: 330px;
    }

    .trant-but2 {
        position: absolute;
        top: 320px;
        left: 330px;
    }
    .el-button {
        margin-top: 10px;
    }

    .trant-right {
        position: absolute;
        top: 0;
        right: 0;
    }
}

/deep/ .el-dialog {
    min-width: 750px;
    margin-top: 6vh !important;
    .el-dialog__body {
        max-height: 80vh;
    }
}
</style>
